import React from 'react';
import { Card, Form, Grid, Input } from '@alifd/next';
import { ColumnProps } from '@alifd/next/types/table';

interface BaseFormItem {
  // 输入框 提示
  placeholder?: string;
  // 自定义输入框
  customInput?: React.ReactNode;
  // 作为标记 使用
  isSelect?: boolean;
}

// isSelect 为 true 时的接口
interface RequiredFields {
  // 标题
  title: string;
  // 绑定字段
  dataIndex: string;
  isSelect: true;
}

// isSelect 为 false 或 undefined 时的接口
interface OptionalFields {
  title?: string;
  dataIndex?: string;
  isSelect?: false | undefined;
}

// 输入框 类型
export type FormItemType = (BaseFormItem & RequiredFields) | (BaseFormItem & OptionalFields);


export interface manipulationMenuProps {
  // 标题
  title: string;
  // 输入框
  ColumnItem: Array<ColumnProps & FormItemType>;
  // 重置按钮点击事件
  onResetClick: () => void;
  // 筛选按钮点击事件
  onSubmitClick: (value?: unknown, errors?: unknown) => void;
  // 自定义按钮
  customBtn?: React.ReactNode;
}

const {
  Row,
  Col,
} = Grid;
// 操作菜单
const ManipulationMenu: React.FC<manipulationMenuProps> = ({
                                                             title,
                                                             ColumnItem,
                                                             onResetClick,
                                                             onSubmitClick,
                                                             customBtn,
                                                           }) => {
  const formItem: FormItemType[] = ColumnItem.filter(item => item.isSelect === true);
  return (<Form>
    <Card free className="w-full mb-4">
      <Card.Header title={title} />
      <Card.Content>
        <Row gutter={8}>
          {formItem.map((item) => (
            <Col span="8">
              <Form.Item
                name={item.dataIndex}
                label={item.title}
              >
                {item.customInput ? item.customInput : <Input placeholder={item.placeholder} hasClear />}
              </Form.Item>
            </Col>
          ))}
        </Row>
      </Card.Content>
      <Card.Actions className="flex justify-end">
        <Form.Reset onClick={onResetClick}>重置</Form.Reset>
        <Form.Submit
          type="secondary"
          validate
          onClick={onSubmitClick}
        >
          筛选
        </Form.Submit>
        {customBtn}
      </Card.Actions>
    </Card>
  </Form>);
};
export default ManipulationMenu;
